<template>
  <Select ref="deviceS" placeholder="请输入设备编码" :value="value" @on-change="change" :disabled="disabled" :multiple="multiple" filterable clearable remote :remote-method="deviceSearch" :loading="searchLoading">
    <Option v-for="(option, index) in deviceOptions" :value="option.value" :key="`vehicle-complete-option-${option.value}`">{{option.label}}</Option>
  </Select>
</template>

<script>
  import {post}  from '@/util/request'

  export default {
    props: ["value",'multiple','orgIds','disabled'], // orgIds:string
    data() {
      return {
        deviceOptions: [],
        searchLoading: false
      }
    },
    watch:{
      value(v){
        if(!v){
          this.$refs.deviceS.clearSingleSelect();
        }
      }
    },
    methods:{
      change(v){
        this.$emit("input", v);
        this.$emit("on-change", v);
      },
      deviceSearch(query){
        if(query !== '') {
          this.searchLoading = true;
          let data = {
            orgIds:this.orgIds,
            key: query
          };
          post('/common/findDeviceByOrgId', data).then(json => {
            this.searchLoading = false;
            if (json.data.sta === 200) {
              this.deviceOptions = json.data.data.map(item => {
                return {
                  value: item.deviceCode,
                  label: item.deviceCode
                };
              });
            }
          });
        } else {
          this.deviceOptions = [];
        }
      }
    }
  }
</script>
